$dashboard_top_height: 46px;
$dashboard_content_padding: 8px;
$table_re_color: #d6e1f1;
$l-operate-width: 30px; // 表单输入框高，操作按钮大小
$submit_color: #83b9e4;

:host {
  text-align: center;
}

:host ::ng-deep .ant-layout-header,
:host ::ng-deep .ant-layout-footer {
  background-color: #fff;
}

:host ::ng-deep .ant-layout-header{
  height: $dashboard_top_height;
  padding: 4px $dashboard_content_padding;
  text-align: right;
  .ant-avatar{
    width: 36px;
    height: 36px;
    line-height: 36px;
  }
}

:host ::ng-deep .ant-layout-footer {
  line-height: 1.5;
}

:host ::ng-deep .ant-layout-sider {
  // width: 160px;
  background: hsl(206, 96%, 33%);
  color: #fff;
  padding-top: $dashboard_top_height;
}

// 内容
$breadcrumb_and_content_bg: #edf0f5;

:host ::ng-deep .ant-breadcrumb{
  padding: 8px 8px;
  text-align: left;
  background-color: $breadcrumb_and_content_bg;
}

:host ::ng-deep .ant-layout-content {
  background-color: $breadcrumb_and_content_bg;
  padding:0 $dashboard_content_padding;
  overflow-y: scroll;
  position: relative;
}

:host ::ng-deep .ant-layout {
  height: 100%;
  margin-bottom: 48px;
  background-color: #edf0f5;
  
  // 承载容器
  .l-group{
    margin-bottom: $dashboard_content_padding;
    text-align: left;
  }
  // 操作按钮
  .l-operate{
    .ant-avatar{
      background-color: #fff;
      border:1px solid $table_re_color;
      color: $table_re_color;
      line-height: $l-operate-width;
      width: $l-operate-width;
      height: $l-operate-width;
      font-size: 16px;
      .anticon{
        line-height: $l-operate-width;
      }
      &:hover{
        color: #fff;
        background-color: $table_re_color;
        transition:0.3s ease;
      }
    }
  }

}

:host ::ng-deep .ant-layout:last-child {
  margin: 0;
}

// reset table
:host ::ng-deep .ant-table-wrapper{
  background-color: $breadcrumb_and_content_bg;
}
:host ::ng-deep .ant-table-bordered .ant-table-header > table,
:host ::ng-deep .ant-table-bordered .ant-table-body > table,
:host ::ng-deep .ant-table-bordered .ant-table-fixed-left table,
:host ::ng-deep .ant-table-bordered .ant-table-fixed-right table {
  border: 1px solid $table_re_color;
}
:host ::ng-deep .ant-table-bordered .ant-table-thead > tr > th,
:host ::ng-deep .ant-table-bordered .ant-table-tbody > tr > td{
  border-right: 1px solid $table_re_color;
  &:last-child{
    border-right: none;
  }
}
:host ::ng-deep .ant-table-bordered .ant-table-thead > tr > th{
  border-bottom: 1px solid $table_re_color;
}
// 表格-头部背景
:host ::ng-deep .ant-table-thead > tr > th{
  background-color: #f0f3f8;
  text-align: center;
}
:host ::ng-deep .ant-table-tbody > tr{
  td{
    border-bottom: 1px solid $table_re_color;
    background-color: #fff;
    text-align: center;
  }
  &:last-child{
    td{
      border-bottom: none;
    }
  }
}

// checkbox
:host ::ng-deep .ant-checkbox-inner{
  border: 1px solid $table_re_color;
}

// input
:host ::ng-deep .ant-input{
  border: 1px solid $table_re_color;
  height: $l-operate-width;
}
:host ::ng-deep .ant-input-search-icon{
  color: $table_re_color
}

:host ::ng-deep .ant-upload {
  font-size: 1.5rem;
  padding-top: 12px;
}

// pagination
:host ::ng-deep .ant-pagination-prev .ant-pagination-item-link,
:host ::ng-deep .ant-pagination-next .ant-pagination-item-link{
  border: 1px solid $table_re_color;
}

// select
:host ::ng-deep .ant-select-selection{
  border: 1px solid $table_re_color;
  height: $l-operate-width;
}

// modal - alert
:host ::ng-deep .ant-modal-content{
  .ant-modal-close{
    color: #bbc6d6;
    font-size: 20px;
  }
  .ant-modal-header{
    border-bottom: 1px solid $table_re_color;
    background-color: $breadcrumb_and_content_bg;
  }
  .ant-modal-footer{
    padding: 0;
    border-top: 1px solid $table_re_color;
    overflow: hidden;
    .ant-btn{
      width: 50%;
      border-radius: 0;
      border: 0;
      margin: 0;
      padding: 0;
      font-weight: 300;
      &:last-child{
        border-right: 1px solid $table_re_color;
        float: left;
        color: $submit_color;
        background-color: $breadcrumb_and_content_bg;
      }
    }
  }
  .ant-modal-body{
    max-height: 400px;
    overflow-y: scroll;
  }
}

// submit - panel -btn
.m-form-sub{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  text-align: left;
  background-color: #fff;
  border-top: 1px solid #d6e1f1;
  a{
      display: inline-block;
      padding: 10px 60px;
      color: #999;
      border-right: 1px solid #d6e1f1;
      font-weight: 300;
      &:first-child{
          background-color: #edf0f6;
          color: #83b9e4;
      }
  }
}